<template >
	<image :src="src"  @error="handlerError" :class="[className,'img']" v-if="!showPlaceholder"></image>
	
	<image v-else :src="placeholder" :class="`${className} placeholder-img`"></image>
</template>

<script setup lang="ts">
import { ref, useAttrs } from 'vue';

	interface IProps {
		src?:string;
		placeholder?:string;
		className?:string
	}
	defineProps<IProps>()
	
	const showPlaceholder = ref(false)
	
	
	const handlerError = ()=>{
		showPlaceholder.value = true
	}
</script>

<style lang="less" scoped>
	.img{
		width: 160rpx;
		height: 160rpx;
		border-radius: 12rpx;
		margin-right: 24rpx;
	}
	.placeholder-img{
		width: 160rpx;
		height: 160rpx;
		border-radius: 12rpx;
		margin-right: 24rpx;
	}
</style>